<template>
  <div class="big_vontainer">
    <mytitle msg="编辑资料" @click.native="goback"></mytitle>
    <div class="mypic">
      <!--图片上传-->
      <van-uploader :after-read="afterRead">
        <img
          v-if="personal.head_img"
          :src="'http://157.122.54.189:9083' + personal.head_img"
          alt=""
        />
        <img v-else src="@/assets/mypic.png" alt="" />
      </van-uploader>
    </div>
    <div class="mymsg">
      <!--昵称-->
      <myfocusbtn
        msg="昵称"
        :submsg="personal.nickname"
        @click.native="show = true"
      ></myfocusbtn>
      <!--密码-->
      <myfocusbtn
        msg="密码"
        submsg="******"
        @click.native="showpassword = true"
      ></myfocusbtn>
      <!--性别-->
      <myfocusbtn
        msg="性别"
        :submsg="personal.gender == 1 ? '男' : '女'"
        @click.native="sexshow = true"
      ></myfocusbtn>
    </div>

    <!--组件使用修改名称-->
    <van-dialog
      v-model="show"
      title="标题"
      show-cancel-button
      @confirm="changenickname"
    >
      <van-field placeholder="请输入用名称" v-model="nickname" />
    </van-dialog>
    <!--组件使用修改密码-->
    <van-dialog
      v-model="showpassword"
      title="标题"
      show-cancel-button
      @confirm="changepassword"
    >
      <van-field placeholder="请输入用密码" v-model="password" />
    </van-dialog>
    <!--性别选项动作面板-->
    <van-action-sheet
      v-model="sexshow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import myfocusbtn from "@/components/myfocusbtn";
import mytitle from "@/components/mytitle";
export default {
  components: {
    myfocusbtn,
    mytitle,
  },
  data() {
    return {
      personal: {},
      show: false,
      nickname: "",
      showpassword: false,
      password: "",
      sexshow: false,
      actions: [
        { name: "男", key: 1 },
        { name: "女", key: 0 },
      ],
    };
  },
  created() {
    //数据渲染完成的时候发送请求,渲染页面内容
    this.updatapage();
  },
  methods: {
    goback() {
      history.back();
    },
    //封装渲染页面数据的方法,当下面的数据发生改变的时候要重新调用
    updatapage() {
      const id = window.localStorage.getItem("tokenid");
      this.$axios({
        url: "/user/" + id,
        //设置了请求拦截
        // headers: {
        //   Authorization: localStorage.getItem("token"),
        // },
      }).then((res) => {
        const { data, message } = res.data;
        if (message == "获取成功") {
          this.personal = data;
          // console.log(this.personal);
        }
      });
    },
    //封装修改发送axios函数
    renderpage(data) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("tokenid"),
        //设置了请求拦截
        // headers: {
        //   Authorization: localStorage.getItem("token"),
        // },
        data,
      }).then((res) => {
        // console.log(res);
        this.updatapage();
      });
    },
    //修改名称方法
    changenickname() {
      const data = { nickname: this.nickname };
      this.renderpage(data);
      this.nickname = "";
    },
    changepassword() {
      const data = { password: this.password };
      this.renderpage(data);
      this.password = "";
    },
    //性别修改
    onSelect(action) {
      const data = { gender: action.key };
      console.log(data);
      this.renderpage(data);
      this.sexshow = false;
    },
    // 图片上传  1.先上传图片  2.成功上传图片之后在发送修改请求
    afterRead(file) {
      const fl = new FormData();
      console.log(file.file);
      fl.append("file", file.file);
      this.$axios({
        method: "post",
        url: "/upload",
        // 设置了请求拦截
        // headers: {
        //   Authorization: localStorage.getItem("token"),
        // },
        data: fl,
      }).then((res) => {
        const { message, data } = res.data;
        if (message == "文件上传成功") {
          const newdata = { head_img: data.url };
          this.renderpage(newdata);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.big_vontainer {
  background-color: #f2f2f2;
  min-height: 100vh;
  box-sizing: border-box;
}
.mypic {
  height: 100 / 360 * 100vw;
  width: 100 / 360 * 100vw;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 50 / 360 * 100vw;
  img {
    width: 100%;
    height: 100%;
  }
}
.mymsg {
  padding: 16 / 360 * 100vw;
}
</style>
